<!--
* @author wn
* @date 2022/11/17 11:21:38
* @description: 图表3
!-->
<template>
	<div ref="line" style="height: 330px"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { echartsPie, getEchartsDataThree } from '@/network/home'
import { onMounted, ref } from 'vue'
import elementResizeDetectorMaker from 'element-resize-detector'

// 组件实例 传入  echarts init
const line = ref('')
let myEcharts = null
// 获取数据
getEchartsDataThree().then(result => {
	echartsPie.series[0].data = result.map(item => {
		item.label = { color: item.label }
		return item
	})
	myEcharts.setOption(echartsPie)
})
// 监听 页面 大小 改变
/* window.addEventListener('resize', () => {
	myEcharts.resize()
}) */
// 监听  div 的 大小变化
const erd = elementResizeDetectorMaker()
// dom 需要实例化之后才可以
onMounted(() => {
	myEcharts = echarts.init(line.value)

	erd.listenTo(line.value, () => {
		myEcharts.resize()
	})
})
</script>
<style scoped lang="scss"></style>
